<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>绑定用户信息</title>
		<script src="${frm}/mui/js/mui.min.js"></script>
		<link href="${frm}/mui/css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="${stc}/css/font-awesome.css" />
		<script src="${stc}/js/jquery.js"></script>
		<script src="${stc}/js/spin.min.js"></script>
		<style>
			.mui-input-group:first-child {
				margin-top: 20px;
			}
			body{
    			font-family: "微软雅黑";
    		}
			.mui-input-group label {
				width: 25%;
				text-align: right;
				font-family: "微软雅黑";
				font-size: 10pt;
			}
			.mui-input-group label span{
				color:red;
			}
			.mui-input-row label
			{
				margin-top: 2px;
			}
			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				width: 75%;
				font-family: "微软雅黑";
				font-size: 10pt;
			}
			.mui-content-padded {
				margin-top: 25px;
			}
			.mui-btn {
				padding: 10px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">
				<i class="icon-group" style="color: red;"></i>
				绑定网欣物业用户信息
			</h1>
		</header>
		<div class="mui-content">
			
			<form class="mui-input-group">
				<input type="hidden" id="redirectUrl" value="${redirectUrl!''}">
				<input type="hidden" id="openId" value="${openId!''}">
				<div class="mui-input-row input_extend">
					<label>姓名<span>*</span></label>
					<input id='personName' type="text" class="mui-input-clear mui-input" placeholder="请输入用户信息">
				</div>
				<div class="mui-input-row">
					<label>身份证<span>*</span></label>
					<input id='idCard' type="text" class="mui-input-clear mui-input" placeholder="请输入18位身份证号">
				</div>
				<div class="mui-input-row">
					<label>手机号<span>*</span></label>
					<input id='telephone' type="text" class="mui-input-clear mui-input" placeholder="请输入11位手机号">
				</div>
			</form>
			<div id="spin"></div>
			<div class="mui-content-padded">
				<button id='bindBtn' class="mui-btn mui-btn-block mui-btn-primary">提交绑定</button>
			</div>
		</form>
		<div class="mui-content-padded">
			<p>1、用户信息必须与网欣物业登记的一致；</p>
			<p>2、如绑定失败，请联系网欣物业客服更正用户信息；</p>
			<p>
				3、客服电话：
				<span style="color: red;">0771-123456</span>
			</p>
		</div>
	</div>
	<script type="text/javascript" charset="utf-8">
			var opts = {
					  lines: 12, // The number of lines to draw
					  length:7, // The length of each line
					  width:5, // The line thickness
					  radius: 10, // The radius of the inner circle
					  corners: 1, // Corner roundness (0..1)
					  rotate: 0, // The rotation offset
					  color: '#000', // #rgb or #rrggbb
					  speed: 1, // Rounds per second
					  trail: 100, // Afterglow percentage
					  shadow: true, // Whether to render a shadow
					  hwaccel:false, // Whether to use hardware acceleration
					  className: 'spinner', // The CSS class to assign to the spinner
					  zIndex: 2e9, // The z-index (defaults to 2000000000)
					  top: 'auto', // Top position relative to parent in px
					  left: 'auto' // Left position relative to parent in px
					};
			var spinTarget = document.getElementById('spin');
			var spinner = new Spinner(opts);
			var mask = mui.createMask(function(){});//callback为用户点击蒙版时自动执行的回调；
			(function($, doc) {
				//mui初始化
				$.init();
				//绑定事件
				var redirectUrl = doc.getElementById("redirectUrl");
				var bindBtn = doc.getElementById("bindBtn");
				
				bindBtn.addEventListener("click",function(e){
					//alert(redirectUrl.value);
					//alert(mui("#openId")[0].value);
					//获取表单参数
					bindBtn.disabled=true;
					var datas = {};
					datas.openId = mui("#openId")[0].value;
					datas.personName = mui("#personName")[0].value;
					datas.idCard = mui("#idCard")[0].value;
					datas.telephone = mui("#telephone")[0].value;
					mask.show();//显示遮罩
					spinner.spin(spinTarget);
					//发送ajax请求
					$.ajax({
						type:"post",
						url:"${ctx}/wxwyapp/user/bindWeiXin",
						data:{param:JSON.stringify(datas)},
						dataType:"json",
						success:function(r){
							if(r&&r.success){
								mui.alert(r.msg,'绑定结果提示',function(){});
								if(redirectUrl.value!=''){
									window.location.href=redirectUrl.value;
								}else{
									window.location.reload();
								}
							}else{
								mui.alert(r.msg,'绑定结果提示',function(){});
							}
							bindBtn.disabled=false;
							spinner.stop();
							mask.close();//关闭遮罩
						},
						async:true
					});
				});
			}(mui, document));
			
		</script>
</body>

</html>